<template>
  <div>
    <center>
      <el-upload v-loading="upload.loading" element-loading-text="需要比对用户历史记录，请稍后..." ref="upload"
                 :limit="1" accept=".zip" :headers="upload.headers" :action="upload.url" :disabled="upload.isUploading"
                 :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击选择文件</em></div>
      </el-upload>
      <div slot="footer" class="dialog-footer" style="margin-top: 20px">
        <el-button type="primary" v-hasPermi="['system:user:import']" @click="submitFileForm">确定上传<i class="el-icon-upload el-icon--right"/></el-button>
      </div>

      <div style="width: 1200px;height: 400px">
        <div style="margin-top: 20px;background: white;width: 400px;height: 400px;float: left">
          <h3>添加失败列表</h3>
          <el-table :data="resultList" v-loading="upload.loading" element-loading-text="需要比对用户历史记录，请稍后..." height="500" width="400" border size="mini">
            <el-table-column prop="data" label="文件名" width="180"></el-table-column>
            <el-table-column prop="msg" label="提示" width="180"></el-table-column>
          </el-table>
        </div>
        <div style="margin-top: 20px;background: white;width: 700px;height: 400px;float: right">
          <h3>zip文件夹样例</h3>
          <el-alert :closable="false" title="只能上传zip压缩包，文件内容一定是图片文件。图片文件名称格式为 '社区-姓名.png'" type="warning" show-icon></el-alert>
          <el-alert class="mt5" :closable="false" title="压缩包打包的形式为，选择要打包的图片后压缩，不可直接打包文件夹" type="warning" show-icon></el-alert>
<!--          <div class="el-upload__tip text-red" slot="tip">只能上传zip压缩包，文件内容一定是图片文件。图片文件名称格式为 "姓名-上岗证.png"</div>-->
<!--          <div class="el-upload__tip text-red" slot="tip">压缩包打包的形式为，选择要打包的图片后压缩，不可直接打包文件夹</div>-->
          <div class="example-little">
            <el-avatar shape="square" size="large" fit="fill" :src="menImage"></el-avatar>
            <p class="el-upload__tip">祝桥社区卫生服务中心-张三.png</p>
          </div>
          <div class="example-little">
            <el-avatar shape="square" size="large" fit="fill" :src="menImage"></el-avatar>
            <p class="el-upload__tip">康桥社区卫生服务中心-李四.jpg</p>
          </div>
          <div class="example-little">
            <el-avatar shape="square" size="large" fit="fill" :src="menImage"></el-avatar>
            <p class="el-upload__tip">川沙华夏社区卫生服务中心-王五.png</p>
          </div>
          <div class="example-little">
            <el-avatar shape="square" size="large" fit="fill" :src="menImage"></el-avatar>
            <p class="el-upload__tip">新场社区卫生服务中心-赵六.jpg</p>
          </div>
          <div class="example-little">
            <el-avatar shape="square" size="large" fit="fill" :src="menImage"></el-avatar>
            <p class="el-upload__tip">北蔡社区卫生服务中心-田七.png</p>
          </div>
          <div class="example-little">
            <el-avatar shape="square" size="large" fit="fill" :src="menImage"></el-avatar>
            <p class="el-upload__tip">曹路社区卫生服务中心-哈八.png</p>
          </div>
          <div class="example-little">
            <el-tooltip class="item" effect="light" content="点击预览" placement="top">
              <el-image style="width: 400px; height: 200px" :src="zipImage[0]" :preview-src-list="zipImage"/>
            </el-tooltip>
          </div>
        </div>
      </div>
    </center>
  </div>
</template>
<script>
import {getToken} from "@/utils/auth";
import img from "@/assets/images/guide-import.png"

export default {
  components: {},
  props: [],
  data() {
    return {
      menImage:"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      zipImage:[img],
      // 用户导入参数
      upload: {
        // 是否禁用上传
        isUploading: false,
        loading:false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/user/importData-student-bulk"
      },
      resultList:[]
    }
  },
  watch: {
  },
  methods: {
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.loading = true;
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.$message.success('上传成功');
      this.upload.isUploading = false;
      this.upload.loading = false;
      this.$refs.upload.clearFiles();
      // this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      this.resultList = response.data;
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}
.example-little{
  float: left;
  width: 220px;
  margin-top: 10px;
  height: 100px
}
</style>
